<template>
    <div class="mmv-home">
        <div class="mmv-layout">
            <div class="mmv-layout__main">
                <div class="mmv-home__header">
                    <mmvBanner class="mmv-home__banner"></mmvBanner>
                </div>
                <mmvArticleList class="mmv-home-article-list"></mmvArticleList>
            </div>
            <div class="mmv-layout__sub">
                <div class="mmv-home__post-wrp">
                    <div class="mmv-home__post-header">发布</div>
                    <div class="mmv-home__post-block">
                        <div class="mmv-home__post">
                            <mmvButton class="mmv-home__post-btn">
                                <i class="mmv-icon iconfont icon-fabutiezi"></i>
                                <span>发布帖子</span>
                                <i class="mmv-icon iconfont icon-xiaojiantou"></i>
                            </mmvButton>
                            <p class="mmv-home__post-desc">讨论、分析、攻略、同人文</p>
                        </div>
                        <div class="mmv-home__post">
                            <mmvButton class="mmv-home__post-btn">
                                <i class="mmv-icon iconfont icon-image2"></i>
                                <span>发布图片</span>
                                <i class="mmv-icon iconfont icon-xiaojiantou"></i>
                            </mmvButton>
                            <p class="mmv-home__post-desc">绘画、COS、手工、表情包</p>
                        </div>
                    </div>
                </div>
                <mmvSideSection class="mmv-sem-section" hideHander>
                    <mmv-link target="_blank" to="https://bbs.mihoyo.com">
                        <mmvQrcode></mmvQrcode>
                    </mmv-link>
                </mmvSideSection>
                <mmvSideSection hideBody hideHander style="background:transparent">
                    <template v-slot:body>
                        <mmvAd></mmvAd>
                    </template>
                </mmvSideSection>
                <mmvSideSection title="推荐话题" to="/topic">
                    <mmvTopicList></mmvTopicList>
                </mmvSideSection>
                <mmvSideSection title="焦点推荐" to="/home/3">
                    <mmvOpListBanner :banner="opListBanner"></mmvOpListBanner>
                    <mmvOpList :list="opListData"></mmvOpList>
                </mmvSideSection>
                <mmvSideSection title="推荐用户" to="/recommend">
                    <mmvRecommendUserListMini></mmvRecommendUserListMini>
                </mmvSideSection>
            </div>
        </div>
    </div>
</template>

<script>
import mmvBanner from "./components/banner.vue";
import mmvArticleList from "@/components/mmv-article-list.vue";
import mmvButton from "@/components/mmv-button.vue";
import mmvSideSection from "@/components/mmv-side-section.vue";
import mmvQrcode from "@/components/mmv-qrcode.vue";
import mmvAd from "@/components/mmv-ad.vue";
import mmvTopicList from "@/components/mmv-topic-list.vue";
import mmvOpListBanner from "@/components/mmv-op-list-banner.vue";
import mmvOpList from "@/components/mmv-op-list.vue";
import mmvRecommendUserListMini from "@/components/mmv-recommend-user-list-mini.vue";

export default {
    components: {
        mmvBanner,
        mmvArticleList,
        mmvButton,
        mmvSideSection,
        mmvQrcode,
        mmvAd,
        mmvTopicList,
        mmvOpListBanner,
        mmvOpList,
        mmvRecommendUserListMini,
    },
    data() {
        return {
            opListData: [
                {
                    post_id: "2891640",
                    subject: "【有奖活动】凯亚生日快乐！参与活动赢周边礼包~",
                    banner:
                        "https://upload-bbs.mihoyo.com/upload/2020/11/30/76387920/916f09ceb6c01ececbdeede657362562_4029752740211063841.jpg",
                    official_type: 2,
                },
                {
                    post_id: "2865004",
                    subject: "【有奖话题】提瓦特冒险记—第四期",
                    banner:
                        "https://upload-bbs.mihoyo.com/upload/2020/11/28/76387920/caef8e36e12627278ea1d4d0ded7ad89_1412128561709163319.jpg",
                    official_type: 2,
                },
                {
                    post_id: "2911720",
                    subject: "《原神》拾枝杂谈-「钟离：炊金馔玉」",
                    banner:
                        "https://upload-bbs.mihoyo.com/upload/2020/12/01/75276539/4ce28e8c75fe01db973e5c12fb4d4f22_3386519661616667728.png",
                    official_type: 3,
                },
                {
                    post_id: "2904813",
                    subject: "丘丘人带你一图流看活动——1.1版本活动速递第二期",
                    banner:
                        "https://upload-bbs.mihoyo.com/upload/2020/12/01/75276545/6e28dd8358b417aefb5e80debbb8fa12_6034582615067696169.jpg",
                    official_type: 3,
                },
                {
                    post_id: "2878243",
                    subject: "「陵薮市朝」祈愿：「尘世闲游·钟离(岩)」概率UP！",
                    banner:
                        "https://upload-bbs.mihoyo.com/upload/2020/11/29/75276539/b256e1dc0124fba2de99d6b02e77b9e3_8645367221710274088.jpg",
                    official_type: 1,
                },
                {
                    post_id: "2894000",
                    subject: "违规泄密问题处理公告（新增处理说明-2020/11/30）",
                    banner: "",
                    official_type: 1,
                },
            ],
        };
    },
    computed: {
        opListBanner() {
            return this.opListData.shift();
        },
    },
    mounted() {
        // console.log(this.opListBanner);
        // console.log(this.opListData);
    },
};
</script>

<style lang="less">
.mmv-home {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    &__header {
        display: flex;
    }
    &__banner {
        width: 100%;
        height: 234px;
        margin-bottom: 50px;
    }
    &__post {
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        & + & {
            margin-top: 20px;
        }
        .mmv-button {
            width: 160px;
            height: 40px;
            span {
                margin: 0 20px 0 10px;
                font-size: 16px;
            }
            .mmv-icon {
                font-weight: 300;
            }
            .mmv-icon.icon-fabutiezi,
            .mmv-icon.icon-image2 {
                font-size: 20px;
            }
            .mmv-icon.icon-xiaojiantou {
                font-size: 12px;
            }
        }
        .mmv-button__button {
            align-items: center;
            justify-content: center;
            color: #663c00;
            background-color: #ffe14c;
            border-radius: 4px;
            transition: 0.2s background-color;
            font-weight: 600;
            &:hover {
                background-color: #ffe733;
            }
        }
        &-wrp {
            display: flex;
            flex-direction: column;
            margin-bottom: 50px;
            padding: 0 10px;
            background-color: #fff;
            border-radius: 4px;
            width: 280px;
            height: 234px;
        }
        &-header {
            height: 50px;
            border-bottom: 1px dashed #ebebeb;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
            font-weight: 600;
        }
        &-block {
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex: 1;
        }
        &-desc {
            font-size: 12px;
            color: #999;
            margin-top: 10px;
            word-break: break-all;
            line-height: 1;
        }
    }
}
</style>